import React, { useState } from 'react'
import './index.scss'
import T from 'prop-types'
import NavBar from '../../../components/nav-bar'
import Search from '../../../components/search'
import axios from '.././../../utils/axios'
export default function AddFriendAndGroup(props) {
    const { imgUrl, name, text } = props
  // 是从群聊来还是好友
  const type = props.location.query
  console.log(type)
  const [list, setList] = useState('')
  const [id, setId] = useState('')
  // 0:显示添加好友按钮  1:显示已发送好友申请  2:显示已是好友
  const [showAdd, setShowAdd] = useState(0)
  // 根据id搜索好友/群聊
  const submit = (e) => {
    console.log(e.current.value,type)
    setId(e.current.value)
    let url
    if (type === 'friend') {
      url = `/userFriend/searchFriend?friendid=${e.current.value}`
    } else if (type === 'group') {
      console.log('group');
      url = `/group/searchGroup?groupid=${e.current.value}`
    }
    axios.get(url).then((res) => {
      console.log(res)
      setList(res.data.data)
      if (type === 'friend' && res.data.data.isFriend) {
        setShowAdd(2)
      }
      if (type === 'group' ) {
        if (res.data?.data?.isMember){
           setShowAdd(2)
        }else{
          setShowAdd(0)
        }
    
      }
    })
  }
  // 申请添加为好友
  const addFriend = () => {
    console.log(174)
    let url
    url = `/userFriend/applyFriend?friendid=${id}`
    axios.get(url).then((res) => {
      console.log(res.data)
      if (res.data.code === 0 && res.data.data[0].applyStatus === 0) {
        setShowAdd(1)
      }
    })
  }
  // 添加群聊
  const addGroup = ()=>{
    let url
    url = `/group/applyGroup?groupid=${id}`
    axios.get(url).then((res) => {
      console.log(res.data)
      if (res.data.code === 0 && res.data?.data[0]?.applyStatus === 0) {
        setShowAdd(1)
      }
    })
  }
  return (
    <div className="add-friend">
      <NavBar
        roomName={`${type === 'friend' ? '添加好友' : '添加群聊'}`}
        showRight={false}
      ></NavBar>
      <Search placeholderText="搜索id" toSubmit={submit} width="98vw"></Search>
      {list && type === 'friend' ? (
        <div key={list.id} className="add-friend-item">
          <div className="add-friend-item-user">
            <img src={list.avatar} alt="加载失败" />
            <div>{list.username}</div>
            <div>{list.userid}</div>
          </div>
          {showAdd === 0 ? (
            <div
              className="add-friend-item-btn"
              onClick={() => {
                addFriend()
              }}
            >
              添加好友1
            </div>
          ) : (
            ''
          )}
          {showAdd === 1 ? '已发送好友申请' : ''}
          {showAdd === 2 ? '已是好友' : ''}
        </div>
      ) : (
        ''
      )}
      {list && type === 'group' ? (
        <div className="add-friend-item">
          <div className="add-group-item-user">
            {/* <img src={list.avatar} alt="加载失败" /> */}
            <div>群名：{list.groupName}</div>
            <div>群介绍：{list.introduction}</div>
          </div>
          {showAdd === 0 ? (
            <div
              className="add-friend-item-btn"
              onClick={() => {
                addGroup()
              }}
            >
              添加群聊
            </div>
          ) : (
            ''
          )}
          {showAdd === 1 ? '已发送申请' : ''}
          {showAdd === 2 ? '已经是群成员啦' : ''}
        </div>
      ) : (
        ''
      )}
      {list ? '' : '没有数据'}

      {/* <div>这些人和你有相同的兴趣/年龄相仿~推荐给你</div> */}
    </div>
  )
}
AddFriendAndGroup.propTypes = {
  imgUrl: T.string,
  name: T.string,
  text: T.string,
}
